import React, { Component } from "react";
// 按需导入antd-mobile使用的组件
import { Carousel, Flex, Grid } from "antd-mobile";
// 导入axios
import axios from "axios";
// 导入图片
import Nav1 from "../../assets/images/nav-1.png";
import Nav2 from "../../assets/images/nav-2.png";
import Nav3 from "../../assets/images/nav-3.png";
import Nav4 from "../../assets/images/nav-4.png";

//导入css文件
import "./index.scss";

import getCurrentCity from "../../utils";

const ArrSwiper = [
  { img: Nav1, title: "整租", path: "/home/houselist" },
  { img: Nav2, title: "合租", path: "/home/houselist" },
  { img: Nav3, title: "地图找房", path: "/map" },
  { img: Nav4, title: "去出租", path: "/login" },
];

// 宫格的数据
// const data1 = Array.from(new Array(4)).map(() => ({
//   icon: "https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png",
// }));
// 类组件
export default class Index extends Component {
  state = {
    banners: [],
    groups: [],
    news: [],
    imgHeight: 212,
    cityInfo: "",
  };
  componentDidMount() {
    // 轮播图
    this.getBanner();
    //租房小组
    this.getGroups();
    //新闻资讯
    this.getNews();

    //获取城市定位
    this.getCity();
  }
  //获取城市
  async getCity() {
    // console.log(res.data.body);
    //调用函数获取城市信息
    const cityInfo = await getCurrentCity();

    // 修改state的数据
    this.setState({
      cityInfo,
    });
  }
  // 轮播图
  async getBanner() {
    // 发送请求获取轮播图数据
    const res = await axios.get("http://localhost:8080/home/swiper");

    this.setState({
      banners: res.data.body,
    });
  }
  // 租房小组
  async getGroups() {
    // 发送请求获取租房小组数据
    const res = await axios.get("http://localhost:8080/home/groups", {
      params: {
        area: this.state.cityInfo.value,
      },
    });

    this.setState({
      groups: res.data.body,
    });
  }
  // 最新资讯
  async getNews() {
    const res = await axios.get("http://localhost:8080/home/news", {
      params: {
        area: this.state.cityInfo.value,
      },
    });

    this.setState({
      news: res.data.body,
    });
  }
  // 轮播图函数
  renderSwipers() {
    const { banners } = this.state;
    if (banners.length) {
      return (
        <Carousel autoplay={true} infinite autoplayInterval={1000}>
          {this.state.banners.map((val) => (
            <a
              key={val}
              href="http://www.alipay.com"
              style={{
                display: "inline-block",
                width: "100%",
                height: this.state.imgHeight,
              }}
            >
              <img
                src={`http://localhost:8080${val.imgSrc}`}
                alt=""
                style={{ width: "100%", verticalAlign: "top" }}
              />
            </a>
          ))}
        </Carousel>
      );
    }

    return null;
  }
  //租房小组的内容渲染
  renderItem(item) {
    return (
      <Flex justify="center">
        <Flex.Item className="ground-title">
          <p>{item.title}</p>
          <span>{item.desc}</span>
        </Flex.Item>
        <Flex.Item>
          <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
        </Flex.Item>
      </Flex>
    );
  }

  //最新资讯封装
  rederNewItem(item) {
    return (
      <div className="content">
        <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
        <Flex className="info" direction="column" justify="between">
          <div className="top">{item.title}</div>
          <Flex className="bottom" justify="between" align="end">
            <p>{item.from}</p>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    );
  }
  //首页 跳转到其它页面
  handleJump(item) {
    this.props.history.push(item.path);
  }

  // 跳转到城市列表
  jumpCity = () => {
    this.props.history.push("/citylist");
  };
  // 跳转到地图找房页面
  jumpMap = () => {
    this.props.history.push("/map");
  };
  render() {
    const { cityInfo } = this.state;

    return (
      <div className="Index">
        <div className="swipers">
          {/* 普通函数的调用 实现条件渲染 */}
          {this.renderSwipers()}
          {/* 搜索框 */}
          <Flex className="search">
            <Flex className="left">
              <span onClick={this.jumpCity}>
                {cityInfo ? cityInfo.label : "上海"}
              </span>
              <i className="iconfont icon-arrow"></i>
              <i className="line"></i>
              <i className="iconfont icon-seach"></i>

              <span className="text">请输入小区或地址</span>
            </Flex>
            <i className="iconfont icon-map" onClick={this.jumpMap}></i>
          </Flex>
        </div>
        {/* 导航栏 */}
        <Flex justify="around" className="flex">
          {ArrSwiper.map((item, index) => (
            <Flex.Item key={index} onClick={this.handleJump.bind(this, item)}>
              <img src={item.img} alt="" />
              <h1>{item.title}</h1>
            </Flex.Item>
          ))}
        </Flex>

        {/* 租房小组 */}
        <div className="ground">
          <div className="title">
            <p>租房小组</p>
            <span>更多</span>
          </div>

          {/* 内容 */}
          <Grid
            data={this.state.groups}
            columnNum={2}
            hasLine={false}
            square={false}
            //  renderItem={this.renderItem}使用Grid组件内部的配置{函数}
            renderItem={this.renderItem}
          />
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <h4 className="title">最新资讯</h4>
          <Grid
            data={this.state.news}
            columnNum={1}
            square={false}
            hasLine={false}
            renderItem={this.rederNewItem}
          />
        </div>
      </div>
    );
  }
}
